var app = new Vue({
    el: '#app',
    data: {
        pageFalg: true, // 页面显示状态
        tabs: [], //秒杀时间与是否秒杀中
        tabsidx: 1, //默认秒杀中的下标Id
        tabsTrueId: -1, //真实秒杀活动列表ID
        end_time_down: "", // 秒杀中的默认结束时间
        start_time_down:'',//秒杀中的默认开始时间
        coutdownTimeStr: '00：00：00', //UI显示的倒数计时
        recordData: [], //记录接口返回的所有秒杀列表数据
        list: [], //当前展示的秒杀活动数据
        hideing: true,
        currentDate:''
        // testTime:'',//测试真机是否显示数据
    },
    created: function() { //每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
        this.getList()
        if ($.getPara("userId") != "") {
            var userId = $.getPara("userId");
            this.userId = userId;
            //缓存用户ID
            $.setStorage("userId", userId);
        } else {
            if ($.getStorage("userId") && $.getStorage("userId") != "") {
                var userId = parseInt($.getStorage("userId"));
                this.userId = userId;
            }
        }
    },
    methods: { //事件处理器 backTop和submit在html里面 点一下会触发
        getList: function() {
            var that = this;
            $.ajax({
                url: "/api/seckill/list", //活动相关接口
                type: 'get',
                dataType: 'json',
                data: {},
            }).done(function(res, status, xhr) {
                if (res.code == 200) {
                    var data = res.data;
                    that.getTabs(data);
                } else {
                    $.toast(res.msg, "text");
                }

                //获取本场结束时间
            });
        },
        //获取秒杀时间与是否秒杀中
        getTabs(data) {
            var that = this;
            if (data.length > 0) {
                var tabsArray = [];

                $.each(data, function(index, item) {
                    var obj = {};
                    obj.id = item.id; //唯一的标识Id
                    obj.end_time = item.end_time; //结束时间
                    obj.end_timeStr = item.end_time.toString().substr(11, 5); //UI需要显示的截取时间
                    obj.start_time = item.start_time; //开始时间
                    obj.start_timeStr = item.start_time.toString().substr(11, 5); //UI需要显示的截取时间
                    var startTime = new Date(GetDateDiff(item.start_time)).getTime(); //秒杀开始的时间
                    var endTime = new Date(GetDateDiff(item.end_time)).getTime(); //秒杀结束时间
                    // var currentDate = new Date().getTime(); //当前本地时间
                    var currentDate = item.currentTimeStamp; //当前服务器时间
                    that.currentDate=item.currentTimeStamp;//记录服务器时间
                    that.StcurrentDate=item.currentTimeStamp;//记录服务器时间
                    //判断当前时间是否在  项目的开始时间与结束时间的范围中
                    if (currentDate >= startTime && currentDate <= endTime) {  //当前活动时间段 
                        obj.textFlag = true; //当前是否秒杀中
                        obj.active = true; //默认样式
                        obj.text = "秒杀中";
                        that.tabsTrueId = item.id;
                        that.tabsidx = item.id; //记录当前秒杀中的Id  没有秒杀会默认第一个列表的商品展示
                        that.end_time_down = item.end_time; //记录结束时间
                        that.start_time_down=item.start_time;//记录开始时间
                    } else {
                        obj.textFlag = false;
                        obj.active = false; //默认样式
                        obj.text = "即将开始";
                    }
                    if(currentDate>=endTime){ //结束时间过了
                        obj.text = "已结束";
                    }
                    tabsArray.push(obj);
                })

                this.tabs = tabsArray;

                if (that.end_time_down != "") {
                    //计算当前选中的时间段，倒计时
                    this.grouponcountdown();
                } else {
                    $.toast("当前时间段没有秒杀活动在进行", "text");
                }

                that.recordData = data;
                // console.log(that.recordData)
                //展示选中的秒杀时间段活动列表数据
                that.showList();

            } else {
                this.pageFalg = false;
            }
        },
        grouponcountdown() {
            var that = this;
            // debugger;
            var end_time = GetDateDiff(that.end_time_down); 
            var start_time = GetDateDiff(that.start_time_down); 
            var EndTime = new Date(end_time).getTime();  //结束当前时间
            var StartTime = new Date(start_time).getTime();  //开始当前时间


            // var NowTime = new Date().getTime();  //获取本地系统时间
            that.currentDate = that.currentDate+1000 
            var NowTime = that.currentDate; //获取服务器当前时间

            var total_micro_second = EndTime - NowTime;   //结束时间-当前时间

            //判断不是当前时间段的话 用即将开始字段展示
            if (total_micro_second <= 0) {
                that.coutdownTimeStr = "<div>已结束</div>"
            } else {    
                that.coutdownTimeStr = dateformat(total_micro_second);
            }
            if(NowTime<=StartTime){    //判断当前时间是否到开始时间
                //在即将开始页面中倒计时
                if(StartTime==NowTime){ //如果到了就触发活动相关接口 用来更新当前的tabs文字
                    this.getList(); 
                }
                that.coutdownTimeStr = "<div>即将开始</div>"

            }
            setTimeout(function() {
                that.grouponcountdown(that, end_time);
                // console.log("我执行了")
            }, 1000)
        },
        tab(item) {
            var that = this;
            var id = item.id;
            if (this.tabsidx != id) {
                $.showLoading();
                //不是当前秒杀活动
                var array = this.tabs;
                var end_time_down;
                var start_time_down;
                array.forEach(element => {
                    if (element.id == id) {
                        element.active = true; //选中样式
                        end_time_down = element.end_time;
                        start_time_down= element.start_time;
                    } else {
                        element.active = false; //取消样式
                    }
                });
                this.tabs = array; //重新更新tabs数组高亮项
                this.tabsidx = id; //更新记录的ID
                that.end_time_down = end_time_down; //重新更新结束时间
                that.start_time_down = start_time_down; //重新更新开始时间
                that.showList(); //显示商品列表数据

                setTimeout(function() {
                    $.hideLoading();
                }, 500);
            }
        },
        //展示秒杀列表数据
        showList() {
            var that = this;
            var id = that.tabsidx;
            var data = that.recordData;
            // console.log(data);
            //如果没有选中的数据， 默认第一列商品
            $.each(data, function(j, items) {
                // console.log(items.id + "======" + id)
                //当前选中的时间类型ID ==时间类型下面的商品
                if (items.id == id) {
                      var goodsList = items.goodsList;
                    var array = [];
                    $.each(goodsList, function(k, item) {
                        var obj = {};
                        var endTime=new Date(GetDateDiff(items.end_time)).getTime()
                        //ios safari 报错NaN 
                        //获取当前时间
                        var currentDate=that.currentDate;
                        obj.goods_id = item.goods_id;
                        obj.goods_name = item.goods_name;
                        obj.head_img = item.head_img;
                        obj.original_price = item.original_price;
                        obj.price = item.price;
                        obj.selled_stock = item.selled_stock;
                        obj.spec_id = item.spec_id;
                        obj.total_stock = item.total_stock;
                        //总库存（=销售量+剩余库存量）减去已销售库存
                        if ( (item.selled_stock+item.total_stock) - item.selled_stock <= 0) {
                            obj.hideing = true;
                        } else {
                            obj.hideing = false;
                        }
                        // console.log(item)
                        if (items.id == that.tabsTrueId) {
                            obj.btnText = "立即购买";
                            obj.textFlag = true;
                            //销售库存/（销售库存+剩余库存）                     
                            obj.percentage = (100 * item.selled_stock / (item.selled_stock+item.total_stock)).toFixed(2);
                        } else {
                            if(currentDate>=endTime){ //结束时间过了
                                obj.btnText = "已结束";
                                obj.textFlag = false;
                                obj.className= true; //加灰色按钮 
                              }else{
                                obj.btnText = "即将开始";
                                obj.textFlag = false;
                              }
                            //即将开始状态下，将进度条强制置0.00
                            var x=0;
                            var f = Math.round(x * 100) / 100;
                            var s = f.toString();
                            var rs = s.indexOf('.');
                            if (rs < 0) {
                                rs = s.length;
                                s += '.';
                            }
                            while (s.length <= rs + 2) {
                                s += '0';
                            }
                            obj.percentage = s;//s=0.00显示0.00将进度条撑住
                        }
                        // obj.percentage =10;                   
                        array.push(obj);
                    });

                    that.list = array;
                }
            })
        },
        jump(item) {
            if(item.className){
                $.toast("活动已结束", "text");
                return false;
            }
            if (!item.textFlag) {
                $.toast("活动还未开始", "text");
            } else {
                var para = {};
                para.title = "商品详情";
                para.type = "shop";
                para.url = '/template/CommodityDetails.html?id=' + item.goods_id;
                if (this.userId > 0) {
                    para.url = '/template/CommodityDetails.html?id=' + item.goods_id + "&userId=" + this.userId;
                }
                // window.location.href = para.url;
                if (/(Android)/i.test(navigator.userAgent)) { //判断Android
                    //是android系统
                    // alert("Android系统");
                    jsAndroid.appPush(JSON.stringify(para))
                } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                    //默认为iOS系统
                    window.webkit.messageHandlers.appPush.postMessage(para);
                } else {
                    //pc
                    window.location.href = para.url;
                    alert("PC浏览器");
                };
            }

        }
    }
})


// 时间格式化输出，每1s都会调用一次

function dateformat(micro_second) {
    // 总秒数
    var second = Math.floor(micro_second / 1000);
    // 天数
    var day = Math.floor(second / 3600 / 24);
    // 小时
    var hr = Math.floor(second / 3600 % 24);
    var hrStr = hr.toString();
    if (hrStr.length == 1) hrStr = '0' + hrStr;

    // 分钟
    var min = Math.floor(second / 60 % 60);
    var minStr = min.toString();
    if (minStr.length == 1) minStr = '0' + minStr;

    // 秒
    var sec = Math.floor(second % 60);

    var secStr = sec.toString();

    if (secStr.length == 1) secStr = '0' + secStr;
    return "<div>" + hrStr + "</div>:<div>" + minStr + "</div>:<div>" + secStr + "</div>";

}

function GetDateDiff(DiffTime) {
    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式   
    Time = DiffTime.replace(/\-/g, "/");
    return Time;
}